<template>
	<div class="login">
		<div class="com-header border-1px">
			<div class="back"
				@click="goBack()"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				登录
			</div>
		</div>
		<transition name="slide-right">
			<div class="r-content"
				v-show="!isPhone"
			>
				<div class="c-item border-1px">
					<input type="text" 
						placeholder="请输入您的手机号"
						v-model.trim="mobile"
					>
				</div>
				<div class="c-item border-1px"
					@keyup.enter="login()"
				>
					<input type="password" 
						placeholder="请输入您的密码"
						v-model.trim="password"
						id="password"
					>
					<div class="eyes"
						@click="show()"
					>
						<i class="iconfont" v-show="isShow">&#xe61d;</i>
						<i class="iconfont" v-show="!isShow">&#xe62f;</i>
					</div>	
				</div>
				<div class="submit"
					@click="login()"
				>
					<p>登录</p>
				</div>
				<div class="tip">
					<p>登录 注册 即表示同意<span @click="goArt()">《{{app_name}}使用协议》</span></p>
				</div>
				<div class="phone">
					<p @click="goChange()">忘记密码</p>
					<p @click="phoneLogin()">验证码登录</p>
				</div>
				<div class="register"
					@click="goRegister()"
				>
					<p>没有账号?去注册</p>
				</div>
				<div class="nologin"
					@click="nologin()"
				>
					<p>无法登陆?</p>
				</div>
			</div>
		</transition>
		<transition name="slide-left">
			<div class="r-content"
				v-show="isPhone"
			>
				<div class="c-item border-1px">
					<input type="text" 
						placeholder="请输入您的手机号"
						v-model.trim="mobile"
					>
				</div>
				<div class="c-item border-1px">
					<input type="text" 
						placeholder="请输入验证码"
						v-model.trim="captcha"
						@keyup.enter="CodeLogin()"
					>
					<p @click="getCode()" class="code">{{verifyText}}</p>
				</div>
				<div class="submit"
					@click="CodeLogin()"
				>
					<p>登录</p>
				</div>
				<div class="phone-back"
					@click="backLogin"
				>
					返回
				</div>
			</div>
		</transition>
		
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	import * as types from '../store/types.js'
	import store from '../store/store.js'
	export default{
		data(){
			return{
				mobile: '',
				password: '',
				captcha: '',
				verifyText: '获取验证码',
				isreShow: true,
				isShow: true,
				isPhone: false,
				app_name: window.localStorage.getItem("app_name"),
				isName: false,
				isAu: false
			}
		},
		beforeRouteEnter (to,from,next){
			next( vm => {
				if (!from.name) {
					vm.isName = true
				}else if (from.name == '微信登录') {
					vm.isAu = true
				}
			})
		},
		methods: {
			show: function(){
				const test = document.getElementById('password');
				const retest = document.getElementById('repassword');
				this.isShow = !this.isShow
				if(this.isShow == true){
					test.type = "password";
				}else{
					test.type = "text";
				}	
			},
			goBack(){
				this.$router.go(-1)
			},
			goChange: function(){
				this.$router.push('/user/change/password')
			},
			phoneLogin: function(){
				this.isPhone = true;
			},
			goRegister: function(){
				this.$router.push('/register')
			},
			nologin: function(){
				this.$router.push('/agreement/2');
			},
			backLogin: function(){
				this.isPhone = false;
			},
			getCode: function (event) {
	            if (this.mobile === '') {
	                Toast('请先输入手机号码')
	                return
	            }
	            this.isSending = true;
	            var params = new URLSearchParams();
                params.append('mobile', this.mobile);
                params.append('event', 'mobilelogin');
	            axios.post(Http.SMSSEND, params)
	                .then( res => {
	                    const ret = res.data
	                    if (ret['code'] === 1) {
	                    	Toast('短信已发送');
	                        let count = 60;
	                        let tempObject = setInterval(() => {
	                            this.verifyText = count--;
	                            if (count <= 0) {
	                                this.isSending = false
	                                this.verifyText = '重新获取'
	                                clearInterval(tempObject)
	                            }
	                        }, 1000);
	                    } else {
	                        Toast(ret['msg'])
	                        this.isSending = false
	                    }
	                }, (res) => {
	                    this.isSending = false
	                })
		    },
		    login: function(){
		    	var params = new URLSearchParams();
                params.append('mobile', this.mobile);
                params.append('password', this.password);
                axios.post(Http.LOGIN, params).then( res => {
                	var ret =res.data;
                	var recode = ret['code']
                	if(recode === 1){
                		Toast(ret['msg']);
                		this.token = ret['data']['userinfo']['token']
                        if(this.token){
                        	window.localStorage.setItem('token', this.token);
                        	this.$store.commit(types.LOGIN, this.token);
                        }
                        if (this.isAu) {
                        	this.$router.go(-2)
                        }else if (this.isName) {
                        	this.$router.push("/")
                        }else{
                        	this.$router.go(-1)
                        }                      
                	}else{
                		Toast(ret['msg'])
                	}
                })
		    },
		    CodeLogin: function(){
		    	var params = new URLSearchParams();
                params.append('mobile', this.mobile);
                params.append('captcha', this.captcha);
                axios.post(Http.MOBILELOGIN, params).then( res => {
                	var ret =res.data;
                	var recode = ret['code']
                	if(recode === 1){
                		Toast(ret['msg']);
                		this.token = ret['data']['userinfo']['token']
                        if(this.token){
                        	window.localStorage.setItem('token', this.token);
                        	this.$store.commit(types.LOGIN, this.token);
                        }
                		if (this.isAu) {
                        	this.$router.go(-2)
                        }else if (this.isName) {
                        	this.$router.push("/")
                        }else{
                        	this.$router.go(-1)
                        } 
                	}else{
                		Toast(ret['msg'])
                	}
                })
		    },
		    goArt: function(){
		    	this.$router.push('/agreement/1')
		    }
		}
	}
</script>
<style lang="scss" scoped>
	.login{
		.com-header{
			border-bottom: 0.1rem solid #f5f5f5;
		}
		.r-content{
			min-height: 11.8rem;
			background: #fff;
			.c-item{
				position: relative;
				text-align: left;
				width: 100%;
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.26rem;
				input{
					text-indent: 0.24rem;
					height: 0.88rem;
					width: 100%;
					vertical-align: top;
				}
				p{
					position: absolute;
					top: 0.14rem;
					right: 0.24rem;
					text-align: center;
					height: 0.6rem;
					line-height: 0.6rem;
					border-radius: 0.6rem;
					width: 2rem;
					&.paste{
						background: linear-gradient(to right,rgb(255,101,68), $color);
						color: #fff; 
					}
					&.code{
						border: 0.01rem solid #DCDFE6;
						color: #666;
					}
				}
				.eyes{
					position: absolute;
					top: 0;
					right: 4%;
					width: 0.88rem;
					height: 0.88rem;
					line-height: 0.88rem;
					text-align: center;
					.iconfont{
						font-size: 0.4rem;
					}
				}
			}
			.submit{
				margin: 0.3rem 8%;
				height: 0.88rem;
				line-height: 0.88rem;
				background: linear-gradient(to right,rgb(255,101,68), $color);
				box-shadow: 0 0 0.2rem rgb(255,101,68);
				border-radius: 0.88rem;
				color: #fff;
			}
			.phone-back{
				margin: 0.3rem 8%;
				height: 0.88rem;
				line-height: 0.88rem;
				background: #666;
				border-radius: 0.88rem;
				color: #fff;
			}
			.tip{
				font-size: 0.20rem;
				color: #999;
				span{
					color: rgb(255,101,68);
				}
			}
			.phone{
				display: flex;
				justify-content: space-around;
				margin-top: 0.2rem;
				color: #999;
				p{
					flex: 0 0 40%;
					text-align: right;
					text-decoration: underline;
					&:nth-of-type(2){
						text-align: left;
					}
				}
			}
			.nologin{
				position: fixed;
				bottom: 1rem;
				width: 2rem;
				left: 50%;
				z-index: 666;
				margin-left: -1rem;
				color: #999;

			}
			.register{
				position: fixed;
				bottom: 1.6rem;
				height: 0.88rem;
				z-index: 666;
				line-height: 0.88rem;
				border-radius: 0.88rem;
				width: 60%;
				margin-left: 20%;
				color: #666;
				border: 0.02rem solid #DCDFE6;
			}
		}
	}
	@media (max-height:500px){
		.register{
			display:none;
		}
		.nologin{
			display:none;
		}
	}
</style>